import { useState } from 'react'
import {GlobalStyle,Tab,TabItem} from'./style'  //style.js
// styled-components styled 定义一段样式
// createGlobalStyle 定义全局样式
// 并以组件的方式来返回
// 组件化思想  不以html的思维如看待，页面一个功能块 作为一个组件来看待
function App() {
  return(
    <div className='App'>
<GlobalStyle></GlobalStyle>
<Tab>
 <div className='a1'>
   <span>一碗周</span>
<p>2月前</p>
<img src="./叉号.svg" alt="" />
 </div>
 <h1>在项目中用TS封装AXIOS，一次封装整个团队收益</h1>
 <div className='a2'>
   <p>这篇文章封装的AXIOS已经满足如下功能：无处不在的代码提示；灵活的拦截器；可以创建多个实例，灵活根据项目进行调整；每个实例，或者说每个接口...</p>
   <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86e6d81ef6f641edbf47c21cae5dd383~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?" alt="" />
 </div>
 <div className='a3'>
   <div><span><img src="./点赞.svg" alt="" /></span>1057 </div>
   <div><span><img src="./消息.svg" alt="" /></span>212</div>
   <span className='s1'>axios</span>
 </div>
</Tab>
<Tab>
 <div className='a1'>
   <span>Ali2333</span>
<p>2月前</p>
<img src="./叉号.svg" alt="" />
 </div>
 <h1>关于电竞职业选手转前端开发这件事</h1>
 <div className='a2'>
   <p>在2021年之前我是一位王者荣耀职业选手，现是一名前端开发工程师，至于我为什么要这样选择呢，且听我慢慢道来~</p>
   <img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/86e6d81ef6f641edbf47c21cae5dd383~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?" alt="" />
 </div>
 <div className='a3'>
   <div><span><img src="./点赞.svg" alt="" /></span>659</div>
   <div><span><img src="./消息.svg" alt="" /></span>492</div>
   <span className='s1'>前端</span>
 </div>
</Tab>
    </div>
  )
}

export default App
